<!-- 点歌收益列表：仅表格 + 分页 -->
<template>
  <sub-page>
    <main-card>
      <my-table style="height: auto" class="mytable">
        <el-table :data="tableData" style="width: 100%" header-row-class-name="table-header">
          <el-table-column type="index" label="编号" width="100" align="center" header-align="center" />
          <el-table-column prop="wx_name" label="姓名" min-width="140" header-align="center">
            <template slot-scope="scope">
              <div class="uploadImg">
                <img width="22" height="22" :src="scope.row.avator" @error="onAvatarError($event)" />
                <span class="text">{{ scope.row.wx_name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="歌曲" min-width="160" align="center" header-align="center" />
          <el-table-column label="歌手" min-width="160" align="center" header-align="center">
            <template slot-scope="scope">
              <div class="uploadImg" style="justify-content:center;">
                <img width="22" height="22" :src="(scope.row.singerInfoObj && scope.row.singerInfoObj.avator) || defaultAvatar" @error="onAvatarError($event)" />
                <span class="text">{{ (scope.row.singerInfoObj && scope.row.singerInfoObj.name) || '-' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="金额" min-width="120" align="center" header-align="center" />
          <el-table-column prop="gift_income" label="收益" min-width="120" align="center" header-align="center" />
          <el-table-column prop="format_create_time" label="时间" min-width="180" align="center" header-align="center" />
        </el-table>
      </my-table>

      <div class="pageNation-container">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalResult"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </main-card>
  </sub-page>

</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import MyTable from '@/components/myTable';
import { getMusicIncomeList } from '@/api/setting/activityIncome/activityIncomeData';

export default {
  name: 'musicIncome',
  components: { SubPage, MainCard, MyTable },
  data() {
    return {
      tableData: [],
      totalResult: 0,
      currentPage: 1,
      pageSize: 10,
      defaultAvatar: require('@/assets/image/icon/userCenter/defaultAvatar.png'),
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    onAvatarError(e) {
      e.target.src = this.defaultAvatar;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchList();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.fetchList();
    },
    fetchList() {
      const params = {
        splid: this.$store.state.liveId,
        type: 'Music',
        currentPage: `${this.currentPage}`,
        showCount: `${this.pageSize}`,
      };
      getMusicIncomeList(params)
        .then((res) => {
          const data = res.data || {};
          const list = (data.list || []).map((item) => {
            const info = item.singerInfo;
            let parsed = null;
            if (info) {
              if (typeof info === 'string') {
                try {
                  parsed = JSON.parse(info);
                } catch (e) {
                  parsed = null;
                }
              } else if (typeof info === 'object') {
                parsed = info;
              }
            }
            return { ...item, singerInfoObj: parsed };
          });
          this.tableData = list;
          this.totalResult = data.totalResult || 0;
        })
        .catch(() => {
          this.tableData = [];
          this.totalResult = 0;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.mytable {
  .uploadImg {
    display: flex;
    align-items: center;
    margin-left: 50px;
    img {
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.pageNation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
